<template>
  <div>
    <!--模糊查询-->
    <el-form :inline="true" :model="pageData" class="demo-form-inline">
      <el-form-item label="分类名称：">
        <el-input v-model="pageData.bTitle" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="pageData.statusId" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reformdata"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button type="primary" @click="addData()"><i class="el-icon-circle-plus-outline"></i>添加</el-button>
      </el-form-item>
    </el-form>

    <!--文章管理-->
    <el-dialog title="操作页面" :visible.sync="dialogPage" @close="reformPage()" width="35%">

      <el-form :model="formPage"  class="demo-ruleForm" label-width="120px">
        <el-form-item label="文章名称" :label-width="formLabelWidth" >
          <el-input  :disabled="true" v-model="formPage.pTitle" autocomplete="off" style="width: 80%;" placeholder="请输入文章名称"></el-input>
        </el-form-item>
        <el-form-item label="文章描述" :label-width="formLabelWidth" >
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="formPage.pDescribe">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reformPage()">取 消</el-button>
        <el-button type="primary" @click="updPage()">确 定</el-button>
      </div>

    </el-dialog>




    <!--添加-->
    <el-dialog title="操作页面" :visible.sync="dialogFormVisible" @close="reform('form')" width="35%">

      <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm" label-width="120px">
        <el-form-item label="导航名称" :label-width="formLabelWidth" prop="bTitle">
          <el-input v-model="form.bTitle" autocomplete="off" style="width: 80%;" placeholder="请输入导航名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reform('form')">取 消</el-button>
        <el-button type="primary" @click="addform('form')">确 定</el-button>
      </div>

    </el-dialog>


    <!--表格-->
    <el-table id="tab" :data="tableData" style="width: 100%;margin-bottom: 20px;"
              :tree-props="{children: 'children',hasChildren: 'hasChildren'}"

              row-key="yId"
              border>
      <el-table-column prop="yId" label="序号" width="100%"></el-table-column>
      <el-table-column prop="bTitle" label="导航名称"></el-table-column>
      <el-table-column prop="statusId" label="状态" >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.statusId"
            :active-value="1"
            :inactive-value="0"
            active-text="禁用"
            inactive-text="正常"
            active-color="#ff4949"
            inactive-color="#13ce66"
            @change="handleClose(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button size="mini" slot="reference" type="danger">删除</el-button>
          </el-popconfirm><!--@click="$router.push('/')"-->
            <el-button size="mini" type="primary" v-if="scope.row.yPid==0" @click="addSon(scope.row)"><i class="el-icon-circle-plus-outline"></i>添加</el-button>

            <el-button size="mini" v-else type="primary" @click="showPage(scope.row)">文章管理</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination style="text-align: right;margin-top: 20px"
                   :current-page="pageData.current"
                   :page-count="pages"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
                   :page-sizes="[10, 20, 30, 40]"
                   :page-size="pageData.size"
                   layout="sizes,prev,pager, next">
    </el-pagination>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "bottompage",
    inject: ['reload'],//注入app的reload方法
    data() {
      return {
        pageData:{
          current:1,
          size:100,
          bTitle:'',
          statusId:''
        },textarea:'',
        pages:0,
        tableData: [],
         form: {
          yId:'',
           bTitle: '',
          status:0
        },
        formPage:{
          pTitle:'',
          pDescribe:''
        },
        dialogPage:false,
        formLabelWidth: '120px',
        dialogFormVisible: false,
        value: true,
        rules: {
          bTitle: [
            {required: true, message: '请输入导航名称', trigger: 'blur'},
            {min: 1, max: 8, message: '长度在  到 8 个字符', trigger: 'blur'}
          ]
        }
      }
    }, created() {
      this.getdata();
    },
    methods: {
      //文章管理
      showPage(row) {
        //this.$router.push({ path: '/b', query: { id: row.id }}) //带参跳转
        Object.assign(this.$data.formPage, this.$options.data().formPage);
        this.dialogPage=true;
        //根据yid查询数据
        this.$axios.get("homepage/home-bottompage/findPage?yId="+row.yId).then(r=>{
          this.formPage=r.data;
          this.formPage.pTitle=row.bTitle;
          this.formPage.yId=row.yId;
        })
      },
      //文章管理确认按钮
      updPage(){
          //alert(JSON.stringify(this.formPage.yId))
        this.$axios.post("homepage/home-bottompage/updPage",qs.stringify(this.formPage)).then(r=>{
          //alert(JSON.stringify(r.data))
          this.dialogPage=false;
          this.getdata();
        })

      },
      //取消
      reformPage(){
        this.dialogPage=false;
        this.getdata();
      },
      //获取数据
      getdata() {
        this.$axios.post("homepage/home-bottompage/findAll",qs.stringify(this.pageData)).then(r=>{
          //alert(JSON.stringify(r.data.records))
          this.tableData=r.data.records;
          this.pageData.current=r.data.current;
          this.pages=r.data.pages;
          this.total=r.data.total;
        })
      },
      //模糊查询提交按钮
      onSubmit() {
        //alert(JSON.stringify(this.pageData.bTitle))
        this.getdata();
      },
      //添加按钮 父
      addData() {
        Object.assign(this.$data.form, this.$options.data().form);
        //alert(JSON.stringify(this.form))
        this.dialogFormVisible = true;
      },
      //添加子类
      addSon(row){
        //alert(JSON.stringify(row))
        Object.assign(this.$data.form, this.$options.data().form);
        this.form.yPid=row.yId;
        this.$delete(this.form,'ypId');
        this.dialogFormVisible = true;
        //alert(JSON.stringify(this.form))
      },
      //编辑方法
      handleEdit(row) {
        //alert(JSON.stringify(row))
        Object.assign(this.$data.form, this.$options.data().form);
        this.dialogFormVisible = true;
        this.form.yId=row.yId;
        this.form.statusId=row.statusId;
        this.form.bTitle=row.bTitle;
        this.form.ypId=row.yPid;
        this.$delete(this.form,'ypId');
        //alert(JSON.stringify(this.form))
      },
      //删除方法
      handleDelete(row) {
        if (row.yPid==0){
          //父级菜单下的所有子菜单都删除
          this.$axios.get("homepage/home-bottompage/delByPid?yId=" + row.yId).then(r => {
            if (r.data) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getdata();
            } else {
              this.$message({
                message: '删除失败',
                type: 'warning'
              });
              this.getdata();
            }
          })
        }else {
          //alert(JSON.stringify(row))
          //直接删除子菜单
          this.$axios.get("homepage/home-bottompage/del?yId=" + row.yId).then(r => {
            if (r.data) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getdata();
            } else {
              this.$message({
                message: '删除失败',
                type: 'warning'
              });
              this.getdata();
            }
          })
        }
      },
      //状态开关
      handleClose(done) {
        this.form.yId=done.yId;
        this.form.statusId=done.statusId;
        this.form.ypId=done.yPid;
        this.form.bTitle=done.bTitle;
        this.$delete(this.form,'ypId');
        //alert(JSON.stringify(this.form))
        if (done.yPid==0){
          //alert(0)
          this.upddataByPid();
        } else {
          this.upddata();
          //alert(1)
        }
        //alert(JSON.stringify(this.form));
        this.getdata();
      },
      //添加  编辑 表单
      addform(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.form.yId == '') {
              this.$axios.post("homepage/home-bottompage/addData",qs.stringify(this.form)).then(r => {
                if (r.data) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                  this.getdata();
                } else {
                  this.$message({
                    message: '添加失败',
                    type: 'warning'
                  });
                  this.getdata();
                }
              })
              this.dialogFormVisible=false;
              this.getdata();
            } else {
              //修改
              this.upddata();
              this.dialogFormVisible=false;
              this.getdata();
            }
          }
        });
      },
      //修改方法 子类
      upddata(){
        //alert(JSON.stringify(this.form))
        this.$axios.post("homepage/home-bottompage/updData",qs.stringify(this.form)).then(r=>{
          if (r.data) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getdata();
          } else {
            this.$message({
              message: '修改失败',
              type: 'warning'
            });
            this.getdata();
          }
        })
      },
      //修改父类子类
      upddataByPid(){
        //alert(JSON.stringify(this.form))
        this.$axios.post("homepage/home-bottompage/updDataByPid",qs.stringify(this.form)).then(r=>{
          if (r.data) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getdata();
          } else {
            this.$message({
              message: '修改失败',
              type: 'warning'
            });
            this.getdata();
          }
        })
      },
      handleCurrentChange(currentPage){
        this.pageData.current=currentPage;
        this.getdata();
      },
      handleSizeChange(val){
        this.pageData.size=val;
        this.getdata();
      },
      //取消
      reform(formName) {
        this.$refs[formName].resetFields();
        Object.assign(this.$data.pageData, this.$options.data().pageData);
        this.dialogFormVisible=false;
        this.getdata();
      },reformdata(){
        Object.assign(this.$data.pageData, this.$options.data().pageData);
        this.getdata();
      }
    }
  }
</script>

<style scoped>
  .cc{
    color: red
  }
</style>
